<script setup lang="ts">
import { ref } from 'vue';

const list = ref([1,2,3,4,5,6,7,8,9,10]);

</script>

<template>
        <div class="app">
            <div v-for="item in list" :key="item">
            <div class="box">{{ item }}</div>
        </div>
    </div>
</template>

<style scoped  lang="scss">
.app{
    width: 100%;
    padding: 12px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    height: calc(100vh - 100px);
    overflow-y: scroll;
}
.app > div {
    position: relative;
    width: 100%;
    padding-bottom: calc(40%);
}
.box {
    background-color: #fff;
    color: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
</style>